<template>
  <header>
    <div class="lf">
      <a class="home" href="/">系统首页</a>
      <a href="/upload">上传资料</a>
      <a href="javascript:void(0)" @click="$toastr.info('该功能正在研发中...')">积分商城</a>
    </div>

    <!-- 如果是登录页面不显示搜索框 -->
    <div id="search" v-if="!loginPage">
      <input type="text" name="name" placeholder="请输入要搜索的资源" autocomplete="off"
             v-model="searchText" @keydown.enter="handleSearch"/>
      <a class="search btn" @click="handleSearch">搜索</a>
    </div>

    <div class="rf" v-if="!loginPage">
      <a href="/login" v-if="currentUser == null">登录/注册</a>
      <div class="email-info" v-if="currentUser != null">消息中心
        <b v-if="messageCount > 0">{{ messageCount }}</b>
        <ul class="email-list">
          <li><a @click="$router.push('/message?type=official')">官方<b>{{ globalMessage.official }}</b></a></li>
          <li><a @click="$router.push('/message?type=notify')">通知<b>{{ globalMessage.notify }}</b></a></li>
          <li><a @click="$router.push('/message?type=letter')">私信<b>{{ globalMessage.letter }}</b></a></li>
        </ul>
      </div>

      <div class="current-user" :class="{svip: currentUser.svip }" v-if="currentUser != null">
        <img :src="$api.preview(currentUser.avatar)"/> {{ secureTel(currentUser.tel) }}
        <span class="top-menu">
         <a class="info" href="/personal">个人中心</a>
         <a class="order" href="/order">充值记录</a>
         <a class="cols" href="/collect">我的收藏</a>
         <a class="exit" href="/logout">退出登录</a>
        </span>
      </div>

    </div>
  </header>
</template>

<script>

import {mapGetters} from 'vuex'

export default {
  props: {
    loginPage: { // 是否是登录页面，如果是登录页面，则只展示左导航
      type: Boolean,
      required: false,
      default: false
    }
  },
  computed: {
    ...mapGetters([
      'currentUser',
      'globalMessage',
    ]),
    messageCount() {
      return this.globalMessage.official +
          this.globalMessage.notify +
          this.globalMessage.letter;
    }
  },
  data() {
    return {
      searchText: this.$route.query.search,
      source: false,
    }
  },
  methods: {
    secureTel(tel) {
      return tel.substring(0, 3) + "****" + tel.substring(7);
    },
    handleSearch() {
      // 跳转到 全文检索的页面
      this.$router.push({name: "search", query: {search: this.searchText}});
    }
  },

}
</script>
